<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
        <stats-card 
          title="服务周使用量" 
          :value="weeklyUsage" 
          :loading="loading"
          :error="errors.weeklyUsage"
          iconClass="el-icon-user-solid"
          iconBgColor="#409EFF"
          @retry="fetchWeeklyUsage"
        />
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
        <stats-card 
          title="服务总使用量" 
          :value="totalUsage" 
          :loading="loading"
          :error="errors.totalUsage"
          iconClass="el-icon-s-data"
          iconBgColor="#67C23A"
          @retry="fetchTotalUsage"
        />
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
        <stats-card 
          title="总开通量" 
          :value="totalUsers" 
          :loading="loading"
          :error="errors.totalUsers"
          iconClass="el-icon-user"
          iconBgColor="#E6A23C"
          @retry="fetchTotalUsers"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import StatsCard from '../components/StatsCard'
// import { 
//   getWeeklyServiceUsage, 
//   getTotalServiceUsage, 
//   getTotalUserCount 
// } from '../api/stats'

export default {
  name: 'Dashboard',
  components: { StatsCard },
  data() {
    return {
      weeklyUsage: null,
      totalUsage: null,
      totalUsers: null,
      loading: false,
      errors: {
        weeklyUsage: false,
        totalUsage: false,
        totalUsers: false
      },
      refreshInterval: null
    }
  },
  created() {
    this.fetchData()
    this.setupAutoRefresh()
  },
  beforeDestroy() {
    clearInterval(this.refreshInterval)
  },
  methods: {
    async fetchData() {
      this.loading = true
      try {
        await Promise.all([
          this.fetchWeeklyUsage(),
          this.fetchTotalUsage(),
          this.fetchTotalUsers()
        ])
      } finally {
        this.loading = false
      }
    },
    
    async fetchWeeklyUsage() {
      this.errors.weeklyUsage = false
      try {
        const res = await getWeeklyServiceUsage()
        this.weeklyUsage = res.data
      } catch (error) {
        this.errors.weeklyUsage = true
        console.error('获取周使用量失败:', error)
      }
    },
    
    async fetchTotalUsage() {
      this.errors.totalUsage = false
      try {
        const res = await getTotalServiceUsage()
        this.totalUsage = res.data
      } catch (error) {
        this.errors.totalUsage = true
        console.error('获取总使用量失败:', error)
      }
    },
    
    async fetchTotalUsers() {
      this.errors.totalUsers = false
      try {
        const res = await getTotalUserCount()
        this.totalUsers = res.data
      } catch (error) {
        this.errors.totalUsers = true
        console.error('获取总用户数失败:', error)
      }
    },
    
    setupAutoRefresh() {
      this.refreshInterval = setInterval(() => {
        this.fetchData()
      }, 300000) // 5分钟刷新一次
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f5f7fa;
}
</style>